import {Button, Form, Input, InputNumber, Modal, Select} from "antd";
import TextArea from "antd/es/input/TextArea.js";
import React from "react";

const ChargeModal = ({
                         visible,
                         onCancel,
                         onSubmit,
                         confirmLoading,
                         categoryList
                     }) => {
    const [form] = Form.useForm();

    const handleSubmit = async (values) => {
        await onSubmit(values);
        form.resetFields();
    };

    return (
        <Modal
            title="请录入本笔数据"
            visible={visible}
            onCancel={onCancel}
            footer={[
                <Button key="back" onClick={onCancel}>
                    取消
                </Button>,
                <Button
                    key="submit"
                    type="primary"
                    loading={confirmLoading}
                    onClick={() => form.submit()}
                >
                    提交
                </Button>
            ]}
            style={{maxWidth: 360}}
        >
            <Form
                form={form}
                onFinish={handleSubmit}
                style={{maxWidth: 360}}
            >
                {/* 保持原有表单结构 */}
                <Form.Item
                    label="日期"
                    name="date"
                    rules={[{required: true, message: "日期不能为空"}]}
                >
                    <Input type="datetime-local"/>
                </Form.Item>
                <Form.Item
                    label="分类"
                    name="type"
                    rules={[{required: true, message: "分类不能为空"}]}
                >
                    <Select
                        placeholder="收入 or 支出"
                        options={[
                            {value: "in", label: "收入"},
                            {value: "out", label: "支出"}
                        ]}
                    />
                </Form.Item>
                <Form.Item
                    label="金额"
                    name="amount"
                    rules={[{required: true, message: "金额不能为空"}]}
                >
                    <InputNumber
                        min="0"
                        style={{width: "100%"}}
                        formatter={value =>
                            `${value}`.replace(/(?!\.)(\D)/g, "").replace(/^(\d*\.\d{0,2}).*$/, "$1")
                        }
                    />
                </Form.Item>
                <Form.Item
                    label="种类"
                    name="category"
                    rules={[{required: true, message: "种类不能为空"}]}
                >
                    <Select
                        options={categoryList}
                        showSearch
                        optionFilterProp="label"
                        placeholder="选择种类"
                    />
                </Form.Item>
                <Form.Item
                    label="备注"
                    name="remarks"
                    rules={[{required: true, message: "备注不能为空"}]}
                >
                    <TextArea placeholder="备注"/>
                </Form.Item>
            </Form>
        </Modal>
    );
};

export default ChargeModal;